<!DOCTYPE html>
<html lang="en">
<head>
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <script src="{{ url_for('static', filename='js/jquery-1.8.2.min.js') }}"></script>
</head>
<body>

你的ip是:  {{ ip }}
<div id="msg"></div>
<input id="input" type="text" style="width: 100px;height: 50px;display: block;border: 1px solid #ccc;">
<button id="btn" style="display: block;border: 1px solid #ccc;width: 50px;height: 50px;">改变</button>
<iframe id="iframe1" src="https://mp.weixin.qq.com/s/Trc2Iv7fL9NTtItrew2lTQ" frameborder="0" width="100%" height="300px"></iframe>

<script>
    var url = 'wss://live-socket.chinatravelacademy.com'
    var ws = new WebSocket(url)
    var msgCount = 0
    ws.onmessage = function(res) {
        addMsg('msg')
    }
    ws.onopen = function(res) {
        addMsg('open')
    }
    ws.onclose = function(res) {
        addMsg('close')
    }
    ws.onerror = function(res) {
        addMsg('onerror')
    }
    function addMsg(str) {
        var dom = document.getElementById('msg')
        var p = document.createElement('p')
        p.innerHTML = str + msgCount
        dom.appendChild(p)
        msgCount ++
    }
    $('#btn').click(function() {
        var value = $('#input').val()
        if (!value) {
            return
        }
        $('#iframe1').attr('src', value)
    })
</script>
</body>
</html>